<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sometimes you need an iframe</title>
        <style>
         .intrinsic-container {
             position: relative;
             height: 0;
             overflow: hidden;
         }

         /* Mobile first */
         .intrinsic-container-tall {
             padding-bottom: 500%;
         }

         @media only screen and (min-width : 320px) {
             .intrinsic-container-tall {
                 padding-bottom: 340%;
             }
         }

         @media only screen and (min-width : 480px) {
             .intrinsic-container-tall {
                 padding-bottom: 240%;
             }
         }

         @media only screen and (min-width : 768px) {
             .intrinsic-container-tall {
                 padding-bottom: 142%;
             }
         }

         .intrinsic-container iframe {
             border: none;
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
         }
        </style>
    </head>
    <body>
        <h1>iframe</h1>
        <p>Sometimes using javascript solves the issue of pesky browser caching, so this example uses js.</p>
        <p>Using the following demo for embedding into the iframe:</p>
        <pre>https://fullcalendar.io/releases/fullcalendar/3.9.0/demos/agenda-views.html</pre>
        <p>
            Firefox users can <code>Control-Shift-m</code> to toggle
            <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">view modes</a>.
        </p>
        <div class="intrinsic-container intrinsic-container-tall">
            <iframe id="theIframe" src="">
                loading...
            </iframe>
        </div>
        <script>
         document.getElementById("theIframe").src = "https://fullcalendar.io/releases/fullcalendar/3.9.0/demos/agenda-views.html";
        </script>
    </body>
</html>
